<template>
  <a-card size="small" class="salesCard" style="height: 100%" :loading="loading" :bordered="false">
    <template #title>
      <a-descriptions>
        <template #title>
          <a @click="$emit('detailsClick')">{{ cardItem.securityName }}</a>
          <edit-outlined @click="showModal" style="color: #1890ff; margin-left: 20px" />
        </template>
        <template #extra>
          <div v-if="cardItem.concernStatus == '0'">
            <heart-outlined @click="$emit('attentionClick')" />
            关注
          </div>
          <div v-else>
            <heart-filled style="color: red" @click="$emit('attentionClick')" />
            已关注
          </div>
        </template>
      </a-descriptions>
      <a-space class="cardTitle" size="large">
        <div style="display: flex">
          <div>管辖单位：{{ cardItem.xqdwName }}</div>
          <!-- <div>乱点编号：{{ cardItem.securityNo }}</div> -->
          <div style="margin-left: 20px">涉警量：{{ cardItem.securityCaseNum }}</div>
        </div>

        <div>
          <a-button @click="handleIssue(cardItem)">
            <!-- <router-link
              tag="a"
              target="_blank"
              :to="{
                path: '/single-initiator/add',
                query: {
                  title: issueParams.title,
                  basicContent: issueParams.basicContent,
                  newType: issueParams.newType,
                  oldType: issueParams.oldType,
                  detaillist: issueParams.detaillist,
                },
              }"
            >
              下发到流转单
            </router-link> -->
            下发到流转单
          </a-button>
        </div>
      </a-space>
    </template>
    <div v-if="viewType === 'a'">
      <!-- <a-space class="pieTitle" :size="size">
        <div>分类名称</div>
        <div>警情数</div>
        <div>涉警量中占比</div>
      </a-space>
      <pie
        :data="cardItem.classifyTop5List"
        :height="248"
        :fieldNames="{
          name: 'name',
          value: 'value',
        }"
        title="智能分类"
        @zrender:click="classifyClick"
      /> -->
      <a-row :gutter="24">
        <a-col :span="12">
          <pie
            :data="cardItem.classifyTop5List"
            :height="248"
            :fieldNames="{
              name: 'name',
              value: 'value',
            }"
            :title="viewClassify == '0' ? '智能分类' : '传统分类'"
            @zrender:click="classifyClick"
          />
        </a-col>
        <a-col :span="12">
          <!-- <a-table
            size="small"
            style="margin-top: 50px"
            :pagination="false"
            :columns="columns"
            :data-source="cardItem.classifyTop5List"
          >
            <template #name="{ text }">
              <a>{{ text }}</a>
            </template>
            <template #classify="{ record, index }">
              <a-badge :color="tableColors[index]" :text="record.name" />
            </template>
          </a-table> -->
          <div style="margin-top: 60px; font-size: 15px; line-height: 30px">
            <a-row>
              <a-col :span="1"></a-col>
              <a-col :span="11">分类名称</a-col>
              <a-col :span="5">警情数</a-col>
              <a-col :span="7">占比</a-col>
            </a-row>
            <a-row v-for="(itemTop5, index) in cardItem.classifyTop5List" :key="index">
              <a-col :span="12">
                <a-badge :color="tableColors[index]">
                  <template #text>{{ itemTop5.name }}</template>
                </a-badge>
              </a-col>
              <a-col :span="5">
                <a
                  @click="valueClick(itemTop5.classifyCode)"
                  class="classifyCodexf ant-badge-status-text"
                >
                  {{ itemTop5.value }}
                </a>
              </a-col>
              <a-col :span="7">{{ itemTop5.percent }}</a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
    </div>

    <increase-line
      v-else
      :type="viewClassify == '0' ? '智能' : '传统'"
      :data="cardItem.dayList"
      :legend="['当前警情', '去年同期', '同比增长率']"
      :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum', 'percent'] }"
      @zrender:click="timeChartClickHandle"
    />
    <div class="footer">
      <a-button type="link" @click="$emit('surveyClick')">
        <div>
          <span>监测</span>
          <right-outlined />
        </div>
      </a-button>
      <a-button type="link" @click="$emit('detailsClick')">
        <div>
          <span>详情</span>
          <right-outlined />
        </div>
      </a-button>
    </div>
    <!-- 编辑名称对话框 -->
    <a-modal
      v-model:visible="securityNameVisible"
      title="编辑名称"
      @cancel="handleCancel"
      @ok="handleOk(securityName)"
    >
      <a-form :wrapper-col="wrapperCol">
        <a-form-item label="乱点名称">
          <a-input
            onkeyup="this.value=this.value.replace(/[, ]/g,'')"
            v-model:value="securityName"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 警情列表 -->
    <police-list-drawer
      v-model:visible="tabVisible"
      :title="titleData"
      :tabs="policeTabs"
    ></police-list-drawer>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, reactive, watch } from 'vue';
// import { Pie } from '@/views/dashboard/analysis/components/charts';
import { Pie } from '@/components/charts';
import { message } from 'ant-design-vue';
import { HeartFilled, EditOutlined, HeartOutlined, RightOutlined } from '@ant-design/icons-vue';
// import Timeline from '@/components/charts/line/index.vue';
import increaseLine from '@/components/charts/increaseLine/index.vue';
import { CardItem, BrokenLineItem } from './typing';
import moment from 'moment';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
// import { join } from 'lodash';
import { useRouter } from 'vue-router';
interface Issueparams {
  title: string;
  basicContent: string;
  newType: string;
  oldType: string;
  detaillist: string | undefined;
}
export default defineComponent({
  props: {
    loading: {
      type: Boolean,
      default: () => false,
    },
    date: {
      type: Object,
      default: () => {
        return {};
      },
    },
    detailQuery: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cardItem: {
      type: Object as PropType<CardItem | BrokenLineItem>, // CardList
      default: () => [],
    },
    index: {},
    viewType: {},
    viewClassify: {},
    valueList: {
      type: Object,
      default: () => {},
    },
  },
  emits: ['updateName', 'handleDetailParams'],
  setup(props, { emit }) {
    const issueParams = ref<Issueparams>({
      title: '',
      basicContent: '',
      newType: '1',
      oldType: '12',
      detaillist: undefined,
    });
    const detaillist = ref({});
    const handleIssue = value => {
      emit('handleDetailParams');
      if (value.securityName) {
        issueParams.value.title = '乱点' + value.securityName + '警情统计';
        issueParams.value.basicContent =
          '乱点' +
          value.securityName +
          ', ' +
          props.date.callTimeStart +
          '至' +
          props.date.callTimeEnd +
          '涉警量' +
          value.securityCaseNum +
          '起。' +
          '其中' +
          [value.classifyTop5List[0].name] +
          '发生' +
          value.classifyTop5List[0].value +
          '起, ' +
          '占比' +
          value.classifyTop5List[0].percent +
          '。' +
          '请关注!';
      }
      setTimeout(() => {
        issueParams.value.detaillist = JSON.stringify(detaillist.value);
        let routeUrl = router.resolve({
          path: '/single-initiator/add',
          query: { ...issueParams.value },
        });
        window.open(routeUrl.href, '_blank');
      }, 500);
    };
    const router = useRouter();
    // 颜色数据
    const tableColors = ['#1790ff', '#12c2c2', '#2fc25b', '#f04864', '#8542e0'];
    const securityName = ref<string>(props.cardItem.securityName);
    //编辑名称
    const securityNameVisible = ref<boolean>(false);
    const ListParams = ref<any>(props.valueList);

    const showModal = () => {
      if (props.cardItem.concernStatus === '0') {
        message.warning('请先关注该乱点再进行名称的修改！');
      } else {
        securityNameVisible.value = true;
      }
    };

    const handleOk = (securityName: string) => {
      if (securityName == '' || securityName == null) {
        message.warning({ config: '乱点名称不能为空！' });
      } else {
        securityNameVisible.value = false;
        emit('updateName', securityName, props.index);
      }
    };
    const handleCancel = () => {
      securityName.value = props.cardItem.securityName;
    };

    const titleData = ref<string>('');
    const policeTabs = ref<Array<any>>([]);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const tabVisible = ref<boolean>(false);
    const lineParams = [
      {
        name: '当期警情',
        url: '/security/detail/queryCaseList',
        params: reactive({
          securityNo: props.cardItem.securityNo,
          callTimeStart: '',
          callTimeEnd: '',
          classifyType: '',
          showType: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCodes: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          searchType: '',
          inputParams: '',
          inputType: '',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
      {
        name: '去年同期',
        url: '/security/detail/queryCaseList',
        params: reactive({
          securityNo: props.cardItem.securityNo,
          callTimeStart: '',
          callTimeEnd: '',
          classifyType: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCodes: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          searchType: '',
          inputParams: '',
          inputType: '',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
    ];
    //折线图点击事件
    const timeChartClickHandle = (index, item) => {
      const dataStart = `${item.dataDate} 00:00:00`;
      const dataEnd = `${item.dataDate} 23:59:59`;
      titleData.value = item.dataDate;
      lineParams[0].params.callTimeStart = dataStart;
      lineParams[0].params.callTimeEnd = dataEnd;
      lineParams[0].params.classifyType = ListParams.value.classifyType;
      lineParams[0].params.xqdwCodes = ListParams.value.xqdwCodes;
      lineParams[0].params.classifyCodes = ListParams.value.classifyCodes;
      lineParams[0].params.callSummaryCodes = ListParams.value.callSummaryCodes;
      lineParams[0].params.dealSummaryCodes = ListParams.value.dealSummaryCodes;
      lineParams[0].params.searchType = ListParams.value.searchType;
      lineParams[0].params.inputParams = ListParams.value.inputParams;

      lineParams[1].params.xqdwCodes = ListParams.value.xqdwCodes;
      lineParams[1].params.classifyCodes = ListParams.value.classifyCodes;
      lineParams[1].params.callSummaryCodes = ListParams.value.callSummaryCodes;
      lineParams[1].params.dealSummaryCodes = ListParams.value.dealSummaryCodes;
      lineParams[1].params.classifyType = ListParams.value.classifyType;
      lineParams[1].params.callTimeStart = moment(dataStart).subtract(1, 'year').format(dateFormat);
      lineParams[1].params.callTimeEnd = moment(dataEnd).subtract(1, 'year').format(dateFormat);
      lineParams[1].params.searchType = ListParams.value.searchType;
      lineParams[1].params.inputParams = ListParams.value.inputParams;
      policeTabs.value = lineParams;
      tabVisible.value = true;
    };
    const PieParams = [
      {
        name: '',
        url: '/security/detail/queryCaseList',
        params: reactive({
          securityNo: props.cardItem.securityNo,
          callTimeStart: '',
          callTimeEnd: '',
          xqdwCodes: '',
          classifyCodes: '',
          callSummaryCodes: '',
          dealSummaryCode: '',
          classifyType: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          searchType: '',
          inputParams: '',
          inputType: '',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
    ];
    //饼图点击事件
    const classifyClick = e => {
      if (e.target) {
        titleData.value = '';
        const { dataIndex } = e.target;
        const cardItem = ref<any>(props.cardItem);
        PieParams[0].params.classifyType = ListParams.value.classifyType;
        PieParams[0].params.callTimeStart = ListParams.value.callTimeStart;
        PieParams[0].params.callTimeEnd = ListParams.value.callTimeEnd;
        PieParams[0].params.xqdwCodes = ListParams.value.xqdwCodes;
        PieParams[0].params.callSummaryCodes = ListParams.value.callSummaryCodes;
        PieParams[0].params.dealSummaryCode = ListParams.value.dealSummaryCodes;
        PieParams[0].params.searchType = ListParams.value.searchType;
        PieParams[0].params.inputParams = ListParams.value.inputParams;
        if (ListParams.value.classifyType === '0') {
          PieParams[0].params.classifyCodes =
            cardItem.value.classifyTop5List[dataIndex].classifyCode;
          PieParams[0].params.dealSummaryCode = '';
        } else if (ListParams.value.classifyType === '1') {
          PieParams[0].params.classifyCodes = '';
          PieParams[0].params.dealSummaryCode =
            cardItem.value.classifyTop5List[dataIndex].dealSummaryCode;
        }
        policeTabs.value = PieParams;
        tabVisible.value = true;
      }
    };
    const valueClick = value => {
      titleData.value = '';
      PieParams[0].params.classifyType = ListParams.value.classifyType;
      PieParams[0].params.callTimeStart = ListParams.value.callTimeStart;
      PieParams[0].params.callTimeEnd = ListParams.value.callTimeEnd;
      PieParams[0].params.xqdwCodes = ListParams.value.xqdwCodes;
      PieParams[0].params.callSummaryCodes = ListParams.value.callSummaryCodes;
      PieParams[0].params.dealSummaryCode = ListParams.value.dealSummaryCodes;
      PieParams[0].params.searchType = ListParams.value.searchType;
      PieParams[0].params.inputParams = ListParams.value.inputParams;
      if (ListParams.value.classifyType === '0') {
        PieParams[0].params.classifyCodes = value;
        PieParams[0].params.dealSummaryCode = '';
      } else if (ListParams.value.classifyType === '1') {
        PieParams[0].params.classifyCodes = '';
        PieParams[0].params.dealSummaryCode = value;
      }
      policeTabs.value = PieParams;
      tabVisible.value = true;
    };

    watch(
      () => props.valueList,
      () => {
        ListParams.value = props.valueList;
      },
      {
        deep: true,
      },
    );
    watch(
      () => props.date,
      () => {},
      {
        deep: true,
        immediate: true,
      },
    );
    watch(
      () => props.detailQuery,
      () => {
        detaillist.value = props.detailQuery;
      },
      {
        deep: true,
      },
    ),
      watch(
        () => props.viewClassify,
        () => {
          if (props.viewClassify == 0) {
            PieParams[0].type = 'ai';
            lineParams[0].type = 'ai';
            lineParams[1].type = 'ai';
          } else {
            PieParams[0].type = 'ct';
            lineParams[0].type = 'ct';
            lineParams[1].type = 'ct';
          }
        },
        {
          deep: true,
        },
      );

    return {
      securityNameVisible,
      showModal,
      handleOk,
      securityName,
      handleCancel,
      tabVisible,
      policeTabs,
      titleData,
      tableColors,
      router,
      issueParams,
      detaillist,
      //方法
      timeChartClickHandle,
      classifyClick,
      valueClick,
      handleIssue,
      size: ref(60),
      wrapperCol: { span: 15 },
    };
  },
  components: {
    Pie,
    HeartFilled,
    HeartOutlined,
    // Timeline,
    EditOutlined,
    RightOutlined,
    PoliceListDrawer,
    increaseLine,
  },
});
</script>
<style lang="less" scoped>
.footer {
  float: right;
}
.classifyCodexf:hover {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
}
.cardTitle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
}
</style>
